<div class="base-card">
  <div class="card-head"><img src="" alt="" /></div>
  <div class="card-content">
    <div class="card-title">苹果手机AI智能体</div>
    <p>
      熟悉苹果手机各型号之间的软硬件差异、技术参数、iOS系统、使用技巧及相关功能，准确提供手机故障解决办法
    </p>
    <ul class="card-tags">
      <li>公开配置</li>
    </ul>
    <div class="card-footer">
      <div class="card-author">@lg专家</div>
      <div class="card-date">12.3万</div>
      <div class="btn">找同款</div>
    </div>
  </div>
</div>

<style lang="less">
  .base-card {
    // width: 310px;
    width: 100%;
    padding: 12px;
    height: 136px;
    background-color: white;
    border-radius: 14px;
    display: flex;
    .card-head {
      border: 1px solid #f0f0f0;
      width: 56px;
      height: 56px;
      border-radius: 100%;
      overflow: hidden;
      margin-right: 4px;
      img {
        width: 100%;
      }
    }
    .card-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .card-title {
        font-weight: bold;
        margin-bottom: 6px;
      }
      ul,
      li {
        margin: 0;
        padding: 0;
      }
      ul {
        li {
          font-size: 12px;
          display: inline-block;
          padding: 2px 4px;
          background-color: #eee;
          border-radius: 4px;
        }
      }
      p {
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 10px;
      }
      .card-footer {
        color: #ccc;
        display: flex;
        align-items: center;
        font-size: 12px;
        div {
          margin-right: 10px;
        }
      }
    }
  }
</style>
